<template>
  <view style="padding: 0 30rpx">
    <view
      v-for="(item, index) in props.watchRecord"
      :key="index"
      class="view-record"
      :class="{ 'view-record-not-first': index !== 0 }"
      @click="openVideoDetails(item)"
    >
      <view class="img-box">
        <mxp-image width="160rpx" height="260rpx" errorSize="22px" borderRadius="10px" :src="item.dramaCover"></mxp-image>
      </view>
      <view style="display: flex; flex: 1; flex-direction: column; justify-content: center; width: 100%; padding: 0 14px">
        <view class="record-title-box">
          <text class="record-title">
            <text v-for="(i, idx) in item.dramaTitle" :key="`${i}-${idx}`" :style="{ color: !~props.search.indexOf(i) ? '' : 'red' }">{{ i }}</text>
          </text>
        </view>
        <view class="record-info-box">
          <text class="record-info">观看至{{ item.episodeSeq }}集</text>
          <text class="record-info">共{{ item.seqNum }}集</text>
        </view>
        <view class="record-info-box">
          <text class="intro record-info">简介: {{ item.dramaDesp || '' }}</text>
        </view>
        <view class="butt-box">
          <text style="font-size: 12px; color: #ffffff">立即观看</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import { openPlayletPage } from '@/utils/page/rest';
  import type { SearchDrama } from '@/api/drama';

  type $Props = {
    /** 播放记录列表 */
    watchRecord?: SearchDrama[];
    /** 搜索内容 */
    search?: string;
  };

  const props = withDefaults(defineProps<$Props>(), {
    watchRecord: () => [],
    search: '',
  });

  /** 打开视频详情 */
  function openVideoDetails(item: SearchDrama) {
    openPlayletPage(item);
  }
</script>

<style lang="scss" scoped>
  .view-record-not-first {
    padding-top: 8px;
    border-top: 1px solid #eee9e9;
  }

  .view-record {
    position: relative;
    display: flex;
    width: 690rpx;
    margin-bottom: 8px;
    vertical-align: top;
    border-radius: 10px;

    .record-title-box {
      width: 100%;

      .record-title {
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .record-info-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      margin-top: 6px;

      .record-info {
        font-size: 12px;
        text-align: justify;
      }

      .intro {
        display: -webkit-box;
        overflow: hidden;
        word-break: break-all;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .butt-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      padding: 6px;
      margin-top: 16px;
      background: linear-gradient(to right, #fdbe00 0%, #f66f00 100%);
      border-radius: 20px;
    }
  }
</style>
